<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/bills.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">账单</h1>
			<a class="mui-pull-right" href="#actionArea">过滤</a>
		</header>
		<div class="mui-content" id="content-area">
			<div id="filter-bar">
				已为您显示 <span id="filter-text">最近一个月</span> 的账单
			</div>
			<!--TODO 按月份分组-->
			<!--<div class="month">
				<span>7月</span>
			</div>-->
			<ul class="mui-table-view" id="bill-list"></ul>
			<div id="actionArea" class="mui-popover mui-popover-action">
				<h5>按时间显示</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" value="1">
						最近一个月
					</li>
					<li class="mui-table-view-cell" value="3">
						最近三个月
					</li>
					<li class="mui-table-view-cell" value="6">
						最近半年
					</li>
					<li class="mui-table-view-cell" value="0">
						全部
					</li>
				</ul>
			</div>
			<a id="addMore" class="mui-btn btn-immer">点击查看更多</a>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var filterBar = document.getElementById("filter-bar");
				var billList = document.getElementById("bill-list");
				var addMoreBtn = document.getElementById("addMore");
				var timeFilter = 0,
					page = 1;
				var states = ['已发起', '支付方审核', '支付方处理', '平台审核中', '平台处理中', '收款方审核', '收款方处理', '交易完毕', '数据异常'];
				var lazyLoad = mui(billList).imageLazyload({
					placeholder: '../images/holder1.png',
					autoDestroy: false
				});
				getData(baseURL + 'account/getBills/0/1.json');

				mui('#actionArea').on('tap', '.mui-table-view-cell', function() {
					timeFilter = this.value;
					page = 1;
					billList.innerHTML = '';
					getData(baseURL + 'account/getBills/' + timeFilter + '/' + page + '.json');
					if(this.value) {
						filterBar.style.display = 'block';
					} else {
						filterBar.style.display = 'none';
					}
					document.getElementById('filter-text').innerText = this.innerText;
					mui('.mui-popover').popover('hide');
				})

				mui('.mui-content').on('tap', '#addMore', function() {
					getData(baseURL + 'account/getBills/' + timeFilter + '/' + (++page) + '.json');
				})

				function getData(url) {
					console.log(url);
					Common.ajax({
						url : url
					}, function(data) {
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							var data = data.bills;
							if(!data.length) {
								if(billList.children.length) {
									mui.toast('已加载全部');
								} else {
									Common.showState(billList, '&#xe62b;', '最近没有任何账单', 50);
								}
								addMoreBtn.style.display = 'none';
							} else {
								for(var i = 0; i < data.length; i++) {
									var src = '';
									var dire = true; // 头像是否显示在左侧
									if(data[i].paymentid == User.getMyID()) { // 我是发起人，头像显示在右侧
										dire = false;
									}
									src = Common.artistPic + data[i].receiveid + data[i].rpic + '?' + Math.random();
									createBills(data[i].trid, data[i].type, data[i].money / 100, data[i].ordertime, data[i].state,
										data[i].pu, data[i].ru, data[i].description, data[i].title, src);
								}
								lazyLoad.refresh(true);
								addMoreBtn.style.display = 'block';
							}
						} else {
							mui.toast('加载失败，请稍后重试');
						}
					}, function(xhr) {
						Common.linkError();
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				}

				/**
				 * @param {Object} id		订单编号
				 * @param {Object} type		订单类型
				 * @param {Object} money	金额
				 * @param {Object} time		订单时间
				 * @param {Object} state	交易状态
				 * @param {Object} to		接收人昵称
				 * @param {Object} desc		订单描述
				 * @param {Object} title	关联演艺标题
				 * @param {Object} dire		头像显示位置 (true为左侧)
				 * @param {Object} src		图片路径
				 */
				function createBills(id, type, money, time, state, to, desc, title, dire, src) {
					var item = document.createElement("li");
					item.className = 'mui-table-view-cell mui-media';
					var str = '<a href="javascript:;">';
					switch(type) {
						case 1: // 充值
							str += '<div class="iconfont mui-pull-right recharge">&#xe62d;</div>';
							break;
						case 2: // 提现
							str += '<div class="iconfont mui-pull-right draw">&#xe611;</div>';
							break;
						case 3: // 支付
						case 4: // 退款
							str += '<div class="bill-img-info mui-media-object mui-pull-left">';
							str += '<span class="type">' + (type == 3 ? '支付' : '退款') + '</span><span class="stageName">';
							str += to + '</span><img data-lazyload="' + src + '"></div>';
							break;
						default:
							break;
					}
					str += '<div class="mui-media-body"><h4>￥' + money + '</h4><span class="time">';
					str += time + '</span><span class="state mui-pull-right">' + states[state - 1] + '</span><p class="mui-ellipsis">';
					str += title + '</p><p class="mui-ellipsis">' + desc + '</p><p class="mui-ellipsis billid">';
					str += '订单编号：' + id + '</p></div></a>';
					item.innerHTML = str;
					billList.appendChild(item);
				}
			})
		</script>
	</body>

</html>